<template>
  <div class="user-table-select">
    <el-dialog
      title="文件上传"
      :visible.sync="visible"
      :before-close="doCancel"
    >
      <div class="multi-file">
        <el-upload
          class="upload-demo"
          drag
          :accept="file.accept"
          :action="action"
          :headers="headers"
          :data="params"
          :http-request="doUpload"
          :on-success="doSuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传{{ file.accept }}文件
          </div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { env } from "@/env";
import Http from "axios";
import ResourceApi from "@/api/manage/resource";

export default {
  name: "multi-upload",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    file: {
      type: Object,
      default: null
    }
  },
  computed: {
    action: function() {
      return env.VUE_APP_BASE_URL + this.file.action;
    },
    headers: function() {
      return {
        "X-Token": this.$store.getters.token
      };
    },
    params: function() {
      return {
        template: this.file.template
      };
    }
  },
  methods: {
    doCancel: function() {
      this.$emit("update:visible", false);
    },
    doSuccess: function(res) {
      if (res.success) {
        this.$notify.success("上传成功");
        this.$emit("multiFile:update", false);
      } else {
        this.$notify.error(res.msg);
      }
    },
    doUpload: function(file) {
      console.log(file);
      var resource = {
        name: file.file.name,
        size: file.file.size
      };
      ResourceApi.policy(resource).then(res => {
        this.doUploadOss(file, res.obj);
      });
    },
    doUploadOss: function(file, param) {
      var ossData = new FormData();
      ossData.append("name", param.name);
      ossData.append("key", param.key);
      ossData.append("policy", param.policy);
      ossData.append("OSSAccessKeyId", param.accessid);
      ossData.append("success_action_status", 200);
      ossData.append("signature", param.signature);
      ossData.append("file", file.file, param.name);
      Http.post(param.host, ossData, {
        headers: { "Content-Type": "multipart/form-data; boundary={boundary}" },
        onUploadProgress: function(progress) {
          var percent =
            parseInt(((progress.loaded / progress.total) * 100) | 0) + "%";
          file.onProgress({ percent: percent + "%", returnValue: true });
        }
      })
        .then(res => {
          this.doUploadResult(file, param, true);
        })
        .catch(error => {
          this.doUploadResult(file, param, false);
        });
    },
    doUploadResult: function(file, param, state) {
      var resource = {
        id: param.resourceId,
        state: state ? 1 : -1,
        content: JSON.stringify(param.store)
      };
      ResourceApi.policyResult(resource).then(res => {
        file.onSuccess({});
      });
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@require "../../common/stylus/variable.styl"
.multi-file {
  text-align center
}
</style>
